<template>
  <div class="console-secure">
    <div class="title">接口配置</div>
    <div class="configuration">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-select v-model="link" style="width: 100%;" @change="siteChange" placeholder="请选择">
            <el-option :value="0" label="请选择站点"></el-option>
            <el-option style="width: 100%;" v-for="(item,index) in linkOption" :key="index" :label="item.name"
              :value="item.site_id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select v-model="type" style="width: 100%;" placeholder="请选择您需要的接口">
            <el-option :value="0" label="请选择您需要的接口"></el-option>
            <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="type && type != 30">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="登录Cookie" prop="cookie" :rules="{
              required: true, message: '开发者密码不能为空', trigger: 'blur'
            }">
            <el-input type="text" v-model="ruleForm.cookie" placeholder="必填，Cookie错误无法发布文章" autocomplete="off"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="备注信息" prop="remark">
            <el-input type="text" v-model="ruleForm.remark" placeholder="选填，仅供个人备注，不影响发布" autocomplete="off"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="说明">
            <div>1.请填写<a :href=jumpUrl>{{jumpName}}</a>登录Cookie</div>
            <div>2.过期后系统会提示接口鉴权失败，重新获取新的Cookie保存即可。</div>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>
      </el-row>
      <el-row :gutter="20" v-if="type == 30">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公众号名称" prop="name">
            <el-input type="text" v-model="ruleForm.name" placeholder="用于助记，系统不会验证此名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="开发者ID" prop="app_id" 
            :rules="{
              required: true, message: '开发者ID不能为空', trigger: 'blur'
            }">
            <el-input type="text" v-model="ruleForm.app_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="开发者密码" prop="app_secret" 
            :rules="{
              required: true, message: '开发者密码不能为空', trigger: 'blur'
            }">
            <el-input type="text" v-model="ruleForm.app_secret" autocomplete="off"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="说明">
            <div>1.请从 <code>公众号后台>设置与开发>基本配置</code> 获取 开发者ID 和 开发者密码。</div>
            <div>2.请在 IP白名单 中添加IP 60.247.148.23 ，否则无法发文。</div>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>
      </el-row>
      <div class="btn" v-if="type"><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button></div>
    </div>
    <el-divider></el-divider>
    <!-- <div class="title">接口管理</div>
    <el-row :gutter="30">
      <el-col :span="8"><el-button type="primary" style="width: 200px;">鉴权接口测试</el-button></el-col>
      <el-col :span="8"><el-button type="primary" style="width: 200px;">发布接口测试</el-button></el-col>
      <el-col :span="8"><el-button style="width: 200px;">最近发布记录</el-button></el-col>
    </el-row> -->
  </div>
</template>

<script>
import { list,editPort } from '@/api/example'
export default {
  name: 'Secure',
  data() {
    return {
      link: 0,
      type: 0,
      ruleForm: {},
      linkOption: [],
      typeOption: [
        {
          name: '百家号',
          value: 10
        }, {
          name: '头条号',
          value: 20
        }, {
          name: '微信公众号',
          value: 30
        }, {
          name: '企鹅号',
          value: 40
        }, {
          name: '大鱼号',
          value: 50
        },
      ],
      jumpName: '',
      jumpUrl: '',
      ruleForm: {},
      item: null
    }
  },
  computed: {},
  mounted() {
    if (this.$route.query.item) {
      this.item = JSON.parse(this.$route.query.item)
      this.type = this.item.type
      if (Array.isArray(this.item.port_config)) {
        this.ruleForm = {}
      } else {
        this.ruleForm = this.item.port_config
      }
      
    }
    this.getList()
  },
  methods: {
    getList() {
      const query = {
        search: '',
        status: '',
      }
      list(query).then(res => {
        console.log(res)
        this.linkOption = res.data.list.data
        if (this.$route.query.item) {
          this.link = Number(this.item.site_id)
        }
      })
    },
    siteChange(value) {
      console.log(value)
      this.linkOption.map(item => {
        if (item.site_id == value&&item.port_config&&item.type == 10) {
          this.ruleForm = item.port_config
        }
      })
    },
    submitForm(ruleForm){
      console.log(this.ruleForm)
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let query = {
            form: {
              type: this.type,
              port_config: this.ruleForm
            }
          }
          editPort(query,this.link).then(res => {
            this.$message.success(res.message)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.console-secure {
  width: 100%;
  padding: 0 20px;
  // height: 100%;
  background-color: #fff;

  .title {
    font-size: 18px;
    margin: 20px 0;
  }

  .configuration {
    width: 100%;
    padding: 0 20px;
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }
    .el-divider--horizontal {
      margin: 6px 0;
    }
    .el-row {
      width: 100%;
      margin-top: 15px;
    }
  }
}
</style>
